<template>
    <h1>个人信息</h1>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>职业：{{ job.type }}</h2>
    <h2>薪水：{{ job.salary }}</h2>
    <button @click="changeInfo">修改</button>
    <p style="text-align: left;border-top: 1px solid #000;">
        基本类型的数据，ref() 将其封装为 RefImpl 对象，该对象中提供了对属性 value 的 get 和 set 方法;（基于数据劫持实现响应式）
        <br>
        <br>
        对象类型的数据，对象的属性不再被处理为 RefImpl 对象,而是转为了 Proxy 对象（借助vue3中的 reactive 函数）；

    </p>
</template>

<script lang="ts">
import { ref } from 'vue'

export default {
    name:'ref',
    setup(){
        // 数据
        let name = ref('张三')
        let age = ref(18)
        let job = ref({
            type:'前端',
            salary:'30k'
        })

        // 方法
        function changeInfo(){
            name.value='李四'
            age.value=90
            job.value.type='UI设计'
            job.value.salary='20k'
        }


        return {
            name,
            age,
            job,
            changeInfo
        }
    }
} 
</script>
<style>

</style>